<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
	<title>Plotr Bar Example</title>
	<script src="../lib/prototype/prototype.js" type="text/javascript"></script>
	<script src="../lib/plotr/excanvas.js" type="text/javascript"></script>
	<script src="../lib/plotr/Plotr.js" type="text/javascript"></script>
	<style type="text/css">
		body{font-size:11px;font-family:"Lucida Grande",Arial,sans-serif;color:#6d6d6d;background:#acc95f; width: 600px; margin:10px auto; text-align:center;}
		a:link,a:visited{text-decoration:none;color:#4c4c4c;font-weight:700;}
		a:hover,a:focus{text-decoration:underline;color:#6a6a6a;}
		#footer{}
	</style>
</head>
<body>
	<div><canvas id="plotr1" height="300" width="300"></canvas></div>
	<div><canvas id="plotr2" height="300" width="300"></canvas></div>
	
	<script type="text/javascript">
	//a sample dataset
	var dataset1 = {
		'myFirstDataset': [[0, 1.4], [1, 3], [2, 1.414], [3, 1.73], [4, 2.56]]
	};
	
	//some basic options
	var options = {
		strokewidth: 1,
		backgroundColor: '#acc95f',
		colorScheme: 'grey',
	   	xTicks: [{v:0, label:'Firefox'}, 
		   	{v:1, label:'Opera'}, 
		   	{v:2, label:'Safari'},
		  	{v:3, label:'IE6'},
		   	{v:4, label:'IE7'}
		]
	};
	
	//initialize a new BarChart with the options specified above
	var pie = new Plotr.PieChart('plotr1',options);
	//add the dataset
	pie.addDataset(dataset1);
	//render the PieChart in the canvas element with ID 'plotr1'
	pie.render();
	
	//make another dataset
	var dataset2 = {
		'mySecondDataset': [[0, 2.1], [1, 4.2], [2, 1.9], [3, 3.73], [4, 1.56], [5, 2.56]]
	};
	
	//make some changes to the options
	Object.extend(options,{
		colorScheme: 'red',
		xTicks: 0
	});
	
	//let's re-use the previous made PieChart object
	//reset() sets all options to the default and clears all the datasets
	pie.reset();
	//add a dataset
	pie.addDataset(dataset2);
	//render the new pie in canvas element 'plotr2' with some options
	pie.render('plotr2', options);
	</script>
	<div id="footer">&copy; 2007 <a href="http://www.solutoire.com">solutoire.com</a></div>
</body>
</html>